<!--
 * @Author: your name
 * @Date: 2021-02-01 14:59:51
 * @LastEditTime: 2021-02-02 16:29:08
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \鲜花项目\html\产品详情页.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon">
    <title>鲜花APP - 产品详情页</title>
    <link rel="stylesheet" href="../css/icon.css">
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../css/public.css">
    <link rel="stylesheet" href="../css/swiper-bundle.css">
    <link rel="stylesheet" href="../css/detailPage.css">
    <script src="../js/rem.js"></script>
    <script src="../js/jq.v1.7.js"></script>
    <script src="../js/swiper-bundle.js"></script>
    <!-- 地区三级联动组件 开始 -->
    <link rel="stylesheet" href="../css/weui.min.css">
    <script src="../js/weui.min.js"></script>
    <script src="../js/city.js"></script>
    <!-- 地区三级联动组件 结束 -->
    <script src="../js/detailPage.js"></script>
</head>

<body>

    <!-- 头部标题 开始 -->
    <div class="detail-titie">
        <a class="left-icon iconfont icon-zuojiantou"></a>
        <p class="detail-head">XXX产品</p>
        <div class="more iconfont icon-gengduo"></div>
    </div>
    <!-- 头部标题 结束 -->

    <!-- 产品详细展示轮播图 开始 -->
    <div class="detail-swiper swiper-container">
        <div class="swiper-wrapper">
            <img class="swiper-slide" src="../img/goods_banner_01.jpg" alt="">
            <img class="swiper-slide" src="../img/goods_banner_02.jpg" alt="">
            <img class="swiper-slide" src="../img/goods_banner_03.jpg" alt="">
            <img class="swiper-slide" src="../img/goods_banner_04.jpg" alt="">
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    <!-- 产品详细展示轮播图 结束 -->

    <!-- 产品标题 开始 -->
    <div class="product-head">
        <div class="pro-head-title">
            <div class="left">你是唯一，卡罗拉红玫瑰11枝 </div>
            <i class="iconfont icon-wodeshoucang"></i>
        </div>
        <div class="pro-head-info">
            <span class="price">￥139</span><span class="original-price">￥188</span><span class="sold-out">已售5.24万件</span>
        </div>
    </div>
    <!-- 产品标题 结束 -->

    <!-- 产品规格 开始 -->
    <div class="pro-specification">
        <div class="pro-spec-item">
            <div class="pro-spec-left">花语</div>
            <div class="pro-spec-right">喜欢像是一阵风，而爱你是细水长流</div>
        </div>
        <div class="pro-spec-item">
            <div class="pro-spec-left">材料</div>
            <div class="pro-spec-right">11枝香槟玫瑰，多头白百合2枝，栀子叶8枝</div>
        </div>
        <div class="pro-spec-item">
            <div class="pro-spec-left">包装</div>
            <div class="pro-spec-right">深浅绿双面人造纸2张，米白色缎带1.5米 </div>
        </div>
        <div class="pro-spec-item">
            <div class="pro-spec-left">配送</div>
            <div class="pro-spec-right">全国</div>
        </div>
    </div>
    <!-- 产品规格 结束 -->

    <!-- 配送 开始 -->
    <div class="pro-delivery">
        <form>
            <div class="weui-cells">
                <div class="weui-cell weui-cell_select weui-cell_select-after">
                    <div class="weui-cell__hd">
                        <label for="" class="weui-label">配送</label>
                    </div>
                    <div class="weui-cell__bd">
                        <input class="weui-input" type="text" id="selectArea" name="city" placeholder="请选择配送地区" readonly>
                    </div>
                </div>
            </div>
        </form>
    </div>
    <!-- 配送 结束 -->

    <!-- 图文详情 开始 -->
    <!-- 显示若干张图片 -->
    <div class="img-detail">
        <div class="title">
            <div class="text">图文详情</div>
        </div>
        <div class="img-list">
            <img src="../img/product/1.jpg" alt="">
            <img src="../img/product/2.jpg" alt="">
            <img src="../img/product/3.jpg" alt="">
            <img src="../img/product/4.jpg" alt="">
            <img src="../img/product/5.jpg" alt="">
            <img src="../img/product/6.jpg" alt="">
            <img src="../img/product/7.jpg" alt="">
            <img src="../img/product/8.jpg" alt="">
            <img src="../img/product/9.jpg" alt="">
            <img src="../img/product/10.jpg" alt="">
            <img src="../img/product/11.jpg" alt="">
            <img src="../img/product/12.jpg" alt="">
            <img src="../img/product/13.jpg" alt="">
            <img src="../img/product/14.jpg" alt="">
            <img src="../img/product/15.jpg" alt="">
            <img src="../img/product/16.jpg" alt="">
        </div>
    </div>
    <!-- 图文详情 结束 -->

    <!-- 底部菜单 开始 -->
    <div class="tabBar">
        <div class="tabbar-i"></div>
        <div class="tabbar-i">
            <i class="iconfont icon-B"></i>
        </div>
        <div class="tabbar-i">加入购物车</div>
        <div class="tabbar-i">立即购买</div>
    </div>
    <!-- 底部菜单 结束 -->

</body>

</html>